import React, { useState } from 'react';
import { Input, Button, Modal, message } from 'antd';
import SelectModel from '../../components/Models';
import { Form } from '@lobehub/ui'

interface AgentSetupProps {
    isVisible: boolean;
    onClose: () => void;
    onSetupComplete: () => void;
}

const AgentSetup: React.FC<AgentSetupProps> = ({ isVisible, onClose, onSetupComplete }) => {
    const [token, setToken] = useState('');
    const [model, setModel] = useState(localStorage.getItem('agentModel') || 'gpt-4o');

    const [form] = Form.useForm();

    const handleSubmit = () => {
        if (!token || !model) {
            message.error('请输入token和model');
            return;
        }

        if (token && model) {
            localStorage.setItem('agentToken', token);
            localStorage.setItem('agentModel', model);
            onSetupComplete();
        }
    };

    return (
        <Modal
            title="Agent 设置"

            open={isVisible}
            onCancel={() => {
            }}
            footer={null}
        >
            <Form
                onFinish={handleSubmit}
                form={form}
                layout="vertical">
                <Form.Item
                    required
                    rules={[
                        {
                            message: '请输入您的token',
                            required: true
                        }
                    ]}
                    label="Token">
                    <Input
                        value={token}
                        onChange={(e) => setToken(e.target.value)}
                        placeholder="请输入您的token"
                    />
                </Form.Item>
                <Form.Item
                    required
                    rules={[
                        {
                            message: '请输入您的token',
                            required: true
                        }
                    ]} label="选择模型">
                    <SelectModel
                        model={model}
                        onSelect={(value) => setModel(value)}
                    />
                </Form.Item>
                <Form.Item>
                    <Button
                        block
                        htmlType="submit"
                        type="primary" >
                        确认
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default AgentSetup;